<template>
	<view class="all">
		<view class="center">
			<view class="list">
				<view class="box">
					<image class="left" src="../../../static/login/one.png" mode=""></image>
					<input class="right" type="text" placeholder="请输入手机号" v-model="one" />
				</view>
				<view class="box2">
					<!-- <image class="left" src="../../../static/login/one.png" mode=""></image> -->
					<input class="right" type="text" placeholder="请输入短信验证码" v-model="two" />
					<view class="wrap">
						<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
						<u-button class="wrap" @tap="getCode">{{tips}}</u-button>
					</view>
				</view>
				<view class="box">
					<image class="left" src="../../../static/login/one.png" mode=""></image>
					<input class="right" type="password" placeholder="密码为6~32位，不能包含符号" v-model="three" />
				</view>
				<view class="box">
					<image class="left" src="../../../static/login/one.png" mode=""></image>
					<input class="right" type="password" placeholder="重复输入密码" v-model="four" />
				</view>
			</view>
		</view>
		<view class="last" @click="queding()">
			确定
		</view>
		<view class="last2">
			<label class="radio">
				<radio :checked="r1" @click="chose()" />
			</label>

			<text>阅读并同意和
				<text class="s1">《用户协议》</text>
				<text class="s1">《隐私政策》</text>
			</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '',
				seconds: 30,
				r1: false,
				one: "",
				two: "",
				three: "",
				four: ""
			};
		},
		methods: {
			queding() {
				if (this.r1 && this.one && this.two && this.three) {
					this.$api("/business/user/resetpwd", 'post', {
						mobile: this.one,
						captcha: this.two,
						password: this.three,
						newpassword: this.four
					}).then((res) => {
						console.log(res);
						if (res.data.code == 1) {
							uni.$u.toast(res.data.msg)
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						}
					}).catch((err) => {
						uni.$u.toast(err.data.msg)
					})
				}
			},
			chose() {
				this.r1 = !this.r1
				console.log(this.r1);
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading()
					if (this.one) {
						this.$api("/support_worker/sms/send", 'post', {
							mobile: one,
							type: "3"
						}).then((res) => {
							console.log(res);
							uni.hideLoading();
							uni.$u.toast(res.data.msg);
						})
						this.$refs.uCode.start();
						// }, 2000);
					} else {
						uni.$u.toast('请先输入手机号');
					}

				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				// uni.$u.toast('倒计时结束');
			},
			start() {
				// uni.$u.toast('倒计时开始');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.all {
		padding: 15px;

		.list {
			.box {
				display: flex;
				align-items: center;
				padding: 10px;
				margin: 10px 0;
				background: #F5F5F5;
				border-radius: 5px;

				.left {
					width: 18px;
					height: 18px;
					margin: 0 10px;
				}

				.right {
					flex: 1;
					font-size: 14px;
					font-weight: 400;
					color: #999999;
				}
			}

			.box2 {
				display: flex;
				align-items: center;
				padding: 10px;
				margin: 10px 0;
				background: #F5F5F5;
				border-radius: 5px;

				.left {
					width: 18px;
					height: 18px;
					margin: 0 10px;
				}

				.right {
					flex: 1;
					font-size: 14px;
					font-weight: 400;
					color: #999999;
				}

				.wrap {
					background: #FB774B;
					border-radius: 26px;
					border: none;
					text-align: center;
					color: #fff;
					padding: 5px;
					height: 26px;
				}
			}
		}

		.title {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			font-size: 14px;
			font-weight: 400;
			color: #FB774B;
		}

		.last {
			width: 100%;
			background: #FB774B;
			border-radius: 40px;
			text-align: center;
			color: #fff;
			font-size: 13px;
			padding: 13px;
			box-sizing: border-box;
			margin: 20px 0;
		}

		.last2 {
			display: flex;
			align-items: center;
			justify-content: center;

			.radio {
				margin: 0 5px;

			}

			.s1 {
				font-size: 12px;
				font-weight: 400;
				color: #FB774B;
			}

			text {
				font-size: 12px;
				font-weight: 400;
				color: #999999;
			}
		}
	}
</style>